<template>
  <view class="auth">
    <image src="/static/auth-bg.png" class="bg-img"></image>
    <view class="auth-body-new">
      <!-- <image src="../../static/logo.png" class="logo" mode=""></image> -->
      <view class="title">
        注册
      </view>
    </view>
    <view class="lshuru">
      <view class="shuitem">
        <text class="zval">
          <text class="xing" style="color: red;">*</text>
          手机号
        </text>
        <wd-input type="text" no-border v-model="info.mobile" size="15" placeholder="请输入手机号"/>
      </view>
      <view class="shuitem">
        <text class="zval">
          <text class="xing" style="color: red;">*</text>
          验证码
        </text>
        <wd-input type="text" no-border v-model="info.verifyCode" size="15" placeholder="请输入验证码"/>
        <text class="yans" v-if="timeinfo.isTimer">{{ timeinfo.time }}s</text>
        <text class="yans" v-else @click="lockSheet">获取验证码</text>
      </view>
      <view class="shuitem">
        <text class="zval">
          <text class="xing" style="color: red;">*</text>
          密码
        </text>
        <wd-input show-password type="text" no-border v-model="info.password" size="15" placeholder="请输入密码"/>
      </view>
      <view class="shuitem">
        <text class="zval">
          <text class="xing" style="color: red;">*</text>
          商户名称
        </text>
        <wd-input type="text" no-border v-model="info.name" size="15" placeholder="请输入商户名称"/>
      </view>
      <view class="shuitem">
        <text class="zval">商户省市区</text>
        <wd-picker style="width: 75%;" :columns="columns" placeholder="请选择收货地址" v-if="columns.length"
                   v-model="address" :column-change="onChangeDistrict" @confirm="handlePickerConfirm"
                   label-key="name" value-key="id"/>
        <!-- <wd-datetime-picker v-model="value" label="日期选择" @confirm="handleConfirm" /> -->
        <!-- <wd-picker label="选择地址" v-model="value" :columns="columns" @confirm="handleConfirm"></wd-picker> -->
      </view>
      <view class="shuitem">
        <text class="zval">商户地址</text>
        <wd-input type="text" no-border v-model="info.address" size="15" placeholder="请输入商户地址"/>
      </view>
    </view>

    <view class="footer">
      <wd-button type="primary" size="large" @click="handleDoLogin" block>注册</wd-button>
    </view>
    <view class="wangview">
      <text class="zhu">已有账号?去
        <text class="wangname" @click="getlogin">登录</text>
      </text>
    </view>


    <!-- <wd-action-sheet v-model="showInfo" title="授权用户信息">
      <view style="padding: 15px 15px 150px 15px;">

      </view>
    </wd-action-sheet> -->

    <wd-notify/>
  </view>
</template>

<script setup>
import {useCascaderAreaData} from '@vant/area-data'
import userApiService from '../../api/user';
import userApi from "@/api/user.js"
import {
  ref,
  reactive
} from 'vue';
import {
  useNotify
} from '@/uni_modules/wot-design-uni'
// console.log(useCascaderAreaData()) sendVerifyCode
const {
  showNotify,
  closeNotify
} = useNotify()
import {
  onLoad,
  onShow
} from '@dcloudio/uni-app'
import {
  mpWxLogin
} from "@/api/auth.js"

const showInfo = ref(false)
let wxCode = null
const info = reactive({
  mobile: "",
  account: '',
  password: "",
  verifyCode: "",
  // address: [],
  storeId: 0,
  province: '',//省份
  city: '',//城市
  area: '',//区域
  address: '',//地址
  name: '',//门店信息
})
const address = reactive([])
const captcha = reactive({
  captcha: "",
  uuid: "",
  loginCode: ""
})
const timeinfo = reactive({
  timer: null,
  time: 60,
  isTimer: false,
})
onLoad((e) => {

})


// 地址
const activeCityIndex = ref(0)
const activeRegionIndex = ref(0)
let originTree = uni.getStorageSync("region") || []
const columns = ref([])
const setColumn = async (columnIndex = -1, activeIndex) => {
  let data = [
    [],
    [],
    []
  ]
  let provices = []
  let city = []
  let region = []
  if (originTree.length == 0) {
    originTree = await getRegion()
  }
  originTree.map((item) => {
    provices.push({
      code: item.code,
      id: item.id,
      level: item.level,
      name: item.name,
    })
  })
  if (columnIndex == -1) { // 表示设置省
    originTree[0].city.map(citem => {
      city.push({
        code: citem.code,
        id: citem.id,
        level: citem.level,
        name: citem.name,
      })
    })

    originTree[0].city[0].region.map(ritem => {
      region.push({
        code: ritem.code,
        id: ritem.id,
        level: ritem.level,
        name: ritem.name,
      })
    })
  }

  if (columnIndex == 0) {
    originTree[activeIndex].city.map(citem => {
      city.push({
        code: citem.code,
        id: citem.id,
        level: citem.level,
        name: citem.name,
      })
    })

    originTree[activeIndex].city[0].region.map(ritem => {
      region.push({
        code: ritem.code,
        id: ritem.id,
        level: ritem.level,
        name: ritem.name,
      })
    })
  }

  if (columnIndex == 1) {

    originTree[activeRegionIndex.value].city.map(citem => {
      city.push({
        code: citem.code,
        id: citem.id,
        level: citem.level,
        name: citem.name,
      })
    })

    originTree[activeRegionIndex.value].city[activeIndex].region.map(ritem => {
      region.push({
        code: ritem.code,
        id: ritem.id,
        level: ritem.level,
        name: ritem.name,
      })
    })
  }

  data = [provices, city, region]
  return data

}
const validatorPhone = (phone) => {
  const myreg = /^1[3-9]\d{9}$/;
  return myreg.test(phone)
}
const getRegion = async () => {
  const res = await userApi.getAddressTree()
  console.log(res)
  uni.setStorageSync("region", res.data)
  return res.data
}

const init = async () => {
  columns.value = await setColumn()
  console.log(columns.value)
}
init()


const onChangeDistrict = async (pickerView, value, columnIndex, resolve) => {
  const index = pickerView.getSelectedIndex()[columnIndex]
  const data = await setColumn(columnIndex, index)
  if (columnIndex === 0) {
    activeRegionIndex.value = index
    activeCityIndex.value = 0
    pickerView.setColumnData(1, data[1])
    pickerView.setColumnData(2, data[2])
  }
  if (columnIndex === 1) {
    activeCityIndex.value = index
    pickerView.setColumnData(2, data[2])
  }

  resolve()
}

const handlePickerConfirm = (e) => {
  // console.log(e)
  address.value = e.value
  info.province = e.selectedItems[0].name
  info.city = e.selectedItems[1].name
  info.area = e.selectedItems[2].name
  console.log(info.province)
}

onShow(() => {
})

const getPhoneNumber = (e) => {
  mpWxLogin({
    "code": wxCode,
    "userInfo": {
      "type": "phone",
      "encryptedData": e.encryptedData,
      "iv": e.iv,
      "sessionKey": e.iv
    }
  }).then(res => {
    showNotify({
      type: 'success',
      message: '登录成功'
    })
    setTimeout(() => {
      uni.setStorageSync("token", res.token)
      uni.setStorageSync("userId", res.userId)
      uni.setStorageSync("username", res.userName)
      uni.setStorageSync("etoken", res.eToken.result.token)
      uni.reLaunch({
        url: "/pages/index/index"
      })
    }, 500)
  })
}

const goToPhoneLogin = () => {
  uni.navigateTo({
    url: "/pages/auth/login"
  })
}

function getlogin() {
  uni.navigateBack({delta: 1})
}

const lockSheet = () => {
  console.log(info.mobile)
  if (!info.mobile) {
    uni.showToast({
      icon: "none",
      title: "请输入手机号"
    })
    return false;
  }

  userApiService.sendVerifyCode({
    mobile: info.mobile
  }).then((res) => {
    console.log(res)
    if (res.false && res.false.length > 0) {
      uni.showToast({
        icon: "none",
        title: "短信发送失败，请稍后再试"
      })
      return
    }
    timeinfo.isTimer = true;
    timeinfo.timer = setInterval(() => {
      timeinfo.time--
      if (timeinfo.time < 0) {
        timeinfo.isTimer = false;
        timeinfo.time = 60;
        clearInterval(timeinfo.timer);
      }
      ;
    }, 1000);
    uni.showToast({
      icon: "none",
      title: "发送成功"
    })
  })
}
const handleDoLogin = () => {
  if (!info.mobile) {
    uni.showToast({
      icon: "none",
      title: "请输入手机号",
      duration: 2000
    })
    return false;
  }
  if (!info.verifyCode) {
    uni.showToast({
      icon: "none",
      title: "请输入验证码",
      duration: 2000
    })
    return false;
  }
  if (!info.name) {
    uni.showToast({
      icon: "none",
      title: "请输入商户名称",
      duration: 2000
    })
    return false;
  }
  if (!info.password) {
    uni.showToast({
      icon: "none",
      title: "请输入密码",
      duration: 2000
    })
    return false;
  }
  info.account = info.mobile
  userApiService.nRegister(info).then((res) => {
    console.log(res)
    uni.showToast({
      icon: "none",
      title: "注册成功"
    })
    setTimeout(() => {
      uni.setStorageSync("token", res.token)
      uni.setStorageSync("userId", res.userId)
      uni.setStorageSync("username", res.userName)
      uni.setStorageSync("etoken", res.eToken.result.token)
      uni.reLaunch({
        url: "/pages/index/index"
      })
    }, 500)
  })
}


</script>

<style lang="scss" scoped>
.auth-body-new {
  padding: 40rpx;
  display: flex;
  flex-direction: column;

  .title {
    font-size: 50rpx;
    font-weight: 600;
  }

  .desc {
    font-size: 30rpx;
    color: #666;
    margin-top: 20rpx;
  }
}

.auth {
  position: relative;
  width: 100%;
  padding-bottom: 40rpx;

  &-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 120rpx 0;

    .logo {
      width: 200rpx;
      height: 200rpx;
      border-radius: 100%;
    }

    .title {
      font-size: 70rpx;
      font-weight: 600;
      margin-top: 24rpx;
    }

    .desc {
      font-size: 30rpx;
      color: #666;
      margin-top: 20rpx;
    }
  }

  &-btn {
    width: 80%;
    margin: 0 auto;

    .desc {
      font-size: 24rpx;
      color: #999;
      margin-top: 24rpx;
      text-align: center;
    }
  }
}

.bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  // height: var(--page-height);
  height: 100vh;
  object-fit: cover;
  z-index: -1;
}

.lshuru {
  display: flex;
  flex-direction: column;
  padding: 30rpx;

  .shuitem {
    border-bottom: 1rpx solid #eee;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0 0rpx 30rpx;
    padding: 20rpx;
    background: transparent;
    // margin-bottom: 30rpx;
  }

  .yans {
    margin-left: auto;
    color: #4d80f0;
    white-space: nowrap;
    font-size: 28rpx;
    font-weight: 500;
  }

  .zval {
    width: 170rpx;
    color: #333;
    font-size: 30rpx;
    font-weight: normal;
  }
}

:deep(.wd-input) {
  background: transparent !important;
  // width: 100%;
  flex: 1;
}

:deep(.wd-input__icon) {
  background: transparent !important;
}

:deep(.wd-picker__cell) {
  background-color: transparent !important;
  width: 100% !important;
  color: #666;
  padding: 0 !important;
}

:deep(.wd-picker) {
  width: 75% !important;
}

:deep(.wd-picker__placeholder) {
  color: #666 !important;
}


.wangview {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0rpx 30rpx;

  .wangname {
    color: #007aff;
    font-size: 28rpx;
    font-weight: normal;
  }

  .zhu {
    color: #666;
    font-size: 28rpx;
    font-weight: normal;
  }

  .ml {
    margin-left: auto;
  }
}

.footer {
  margin: 30rpx 30rpx;
}

.auth-btns {
  margin: 0rpx 60rpx;
}

</style>
<style>
.ninput {
  background: transparent;
}
</style>
